<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<!--上述2个meta标签必须放在最前面，任何其他内容都必须放在后面-->
		<title>CSS组件</title>
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
	</head>
	<body>
		//选项卡导航
		<ul class="nav nav-tabs">
			<li><a href="">首页</a></li>
			<li class="active"><a href="">个人信息</a></li>
			<li><a href="">我的博文</a></li>
		</ul>
		<hr />
		//胶囊式导航
		<ul class="nav nav-pills">
			<li><a href="">首页</a></li>
			<li class="active"><a href="">个人信息</a></li>
			<li><a href="">我的博文</a></li>
		</ul>
		<hr />
		//堆叠式导航
		<ul class="nav nav-stacked">
			<li><a href="">首页</a></li>
			<li class="active"><a href="">个人信息</a></li>
			<li><a href="">我的博文</a></li>
		</ul>
		<hr />
		//自适应导航
		<ul class="nav nav-justified">
			<li><a href="">首页</a></li>
			<li class="active"><a href="">个人信息</a></li>
			<li><a href="">我的博文</a></li>
		</ul>
		<hr />
		//二级导航
		<ul class="nav nav-tabs">
			<li><a href="">首页</a></li>
			<li><a href="">个人信息</a></li>
			<li class="dropdown">
				<a class="dropdown-toggle" data-toggle="dropdown"href="">
					我的博文
					<span class="caret"></span>
				</a>
				<ul class="dropdown-menu">
					<li><a href="">技术文章</a></li>
					<li><a href="">成长心得</a></li>
					<li><a href="">我的心情</a></li>
				</ul>
			</li>
			<li><a href="">给我留言</a></li>
			<li><a href="">收藏本站</a></li>
		</ul>
		<hr />
		<!--导航栏1-->
		<nav class="navbar navbar-default" role="navigation">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
					<sapn class="sr-only">切换导航</sapn>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand"href="#">Bootstrap</a>
			</div>
			<div class="collapse navbar-collapse" id="example-navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">C#</a></li>
					<li><a href="#">PHP</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							Java
							<b class="caret"></b>
						</a>
						<ul class="dropdown-menu">
							<li><a href="#">Swing</a></li>
							<li><a href="#">EJB</a></li>
							<li><a href="#">SSH</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>
